<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>密码找回</title>
<link rel="stylesheet" type="text/css"
	href="/bootstrap/bootstrap.4.1.0.css">
<script src="/bootstrap/jquery.3.2.1.min.js"></script>
<script src="/bootstrap/popper.12.5.min.js"></script>
<script src="/bootstrap/bootstrap.4.1.0.min.js"></script>
<script src="/layui/layer/layer.js"></script>
<script src="/vue/Vue.js"></script>
<script src="/vue/axios.js"></script>
<script type="text/javascript">
	$(function() {
		$("#header").load("header.html");
		
	})
</script>
</head>
<body>
	<div id="header"></div>
	<div id="all" class="container">
		<div v-if="phone!=''">
			<table>
				<label>手机号码：{{phone}}</label>
				<button class="btn btn-sg btn-primary" @click="getRegCodeBtn"
					:disabled="disclick">{{getCode}}</button>
				<br>
				<label>验证码：</label>
				<input type="text" class="form-control" style="width: 120px"
					v-model="codemsg">
				<br>
				<button class="btn btn-outline-primary" @click="confirm">确认</button>
			</table>

		</div>
		<div v-show="confirmed">
			<div>
				<label>密码：</label><input type="password" v-model="pwd">
			</div>
			<br>
			<div>
				<label>确认密码：</label><input type="password" v-model="repwd">
			</div>
			<br>
			<button class="btn btn-outline-primary" @click="update">确认</button>
		</div>
	</div>

</body>
<script type="text/javascript">
	new Vue({
		el:"#all",
		data:{
			user:null,
			phone:"",
			getCode:"发送验证码",
			disclick:false,
			confirmed:false,
			totalTime:20,
			pwd:"",
			repwd:"",
			codemsg:"",
			sendcode:"",
		},
		mounted(){
			axios.get("/user/nowUser")
				.then(
					res => {
						if(res.data.code==1){
							let user = res.data.data;
							if(user.phone==null){
								//先判定有没有绑定手机
								layer.alert("您还没有绑定手机，请前往绑定")
								if(user.role==1 || user.role==2){
									location.href="/lsw/detail.html"
								}else if(user.role==3){
									location.href="/csh/changeGymInfo.html";
								}
							}
							this.user = user;
							this.phone = res.data.data.phone;
						}else{
							layer.alert("系统繁忙请稍后再试");
						}
					}
				)
		},
		methods:{
			getRegCodeBtn:function(){
				 axios.get("/home/updatePwd", {
                     params: {
                         phone: this.phone
                     }
                 }).then(result => {
                         console.info(result.data);
                         if (result.data.code == 1) {
                             this.sendcode = result.data.data;
                         }
                        
                 });
				 this.disclick= true;
				 this.getCode = this.totalTime + 's后重发';
                 let clock = window.setInterval(() => {
                     this.totalTime--;
                     this.getCode = this.totalTime + 's后重发';
                     if (this.totalTime < 0) {
                         window.clearInterval(clock);
                         this.getCode = '重新发送验证码';
                         this.totalTime = 20;
                         this.disclick= false;   
                     }
                 }, 1000);
			},
			confirm:function(){
				if(this.sendcode!=""&&this.sendcode==this.codemsg){
					this.confirmed=true;
					console.log(this.confirmed);
					this.phone="";
				}else{
					layer.alert("验证码错误，请重新验证!");
				}
			},
			update:function(){
				if(this.pwd==this.repwd){
					let param = new URLSearchParams();
					param.append("pwd",this.pwd);
					 axios.post("/user/confirmUpdate",param).then(function (result) {
	                         if (result.data.code == 1) {
	                             layer.alert("修改成功!");
	                         }else{
	                        	 layer.alert("系统繁忙，请稍后再试!");
	                         }
	                        
	                 });
				}else{
					layer.alert("密码不匹配");
				}
				this.repwd = "";
			}
		},
	})
</script>
</html>